<template>
  <svg-icon
    class-name="full-screen"
    :icon-class="isFullScreen?'exit-full-screen':'full-screen'"
    @click="toggleScreenFull"
  ></svg-icon>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      isFullScreen: false,
    };
  },
  mounted() {
    screenfull.on("change", () => {
      this.isFullScreen = screenfull.isFullscreen;
    });
  },
  methods: {
    toggleScreenFull() {
      screenfull.toggle();
    },
  },
};
</script>

<style >
.full-screen {
  height: 24px;
  width: 24px;
  cursor: pointer;
  /* display: inline-block; */
}
</style>